<!--
 * @Autor: 王琛
 * @Description: 底部菜单管理
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#menu {
  upAndDownButtons_w = 30px
  width: 100%;
  height: 100%;
  position: relative;
  padding: 10px 0px 10px;
  box-sizing: border-box;
  submenu_h = 50px
  align-items: center;


  .childNav {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .menuDisplayHide {
    menuDisplayHide_btn_h = 25px
    width: 70px;
    height: menuDisplayHide_btn_h;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;
    position: absolute;
    top: -(menuDisplayHide_btn_h);
    left: 10px;
    transition: top .8s;

  }
}

</style>
<template>
  <div id="menu" ref="_menu">
    <!-- 主导航 -->
    <menuScrollContainer :col='_props.config.list.length' ref="scrollingPlugin">
      <imgCon class="mainMenu_btn" v-for="(menuItem,index) in _props.config.list || []" :key="index" :config="menuItem" :isSelect="_data.selectMenuIndex.main == index" @click="menuClicked({ item:menuItem,index,$event })"/>
    </menuScrollContainer>
    <!-- 控制一子导航的显示和隐藏 -->
    <template v-if="_data.child_data_list.child_list_one.length">
      <!-- 一级子导航部分 -->
      <transition name="animate__animated animate__" enter-active-class="animate__fadeInUp" leave-active-class="animate__fadeOutUp">
        <div v-show="_data.isHideMenu" class="childNav" :key="_data.selectMenuIndex.main" :style="{ top:`-${_data.child_position.child_one}px` }">
          <childNav ref="_childNav_one" :config="_data.child_data_list.child_list_one" :btnTag="_data.child_btn_tag.one_btn_tag" @boxHeight="(val) =>{_data.child_position.child_one = val}" @clickToGiveBack="childClickOne"></childNav>
          <!-- 控制二级子导航 -->
          <template v-if="_data.child_data_list.child_list_two.length">
            <transition name="animate__animated animate__" enter-active-class="animate__fadeInUp" leave-active-class="animate__fadeOutUp">
              <div v-show="_data.isHideMenu" class="childNav" :key="_data.selectMenuIndex.child_one" :style="{ top:`-${_data.child_position.child_two}px` }">
                <childNav ref="_childNav_two" :config="_data.child_data_list.child_list_two" :btnTag="_data.child_btn_tag.two_btn_tag" @boxHeight="(val) =>{_data.child_position.child_two = val}" @clickToGiveBack="childClicktwo"></childNav>
              </div>
            </transition>
          </template>
        </div>
      </transition>
    </template>

    <!-- 显示隐藏菜单按钮 -->
    <div v-if="_data.child_data_list.child_list_one.length" class="menuDisplayHide" :style="{ top:`-${_data.hideMenu_h}px` }" @click="actionHideMenu">
      <span>{{ _data.isHideMenu ? "收起菜单" : "展开菜单" }}</span>
    </div>
  </div>
</template>


<script setup lang="ts">
import {nextTick, onMounted, reactive, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {emitter} from "tool";
// 上边icon下面文字的导航样式
import imgCon from "src/components/menuControl/imgCon.vue";
// 引入子导航组件
// import childNav from "src/components/menuControl/childNav.vue";
// 引入导航滚动组件
import menuScrollContainer from "src/components/menuScrollContainer.vue";

const _emit = defineEmits(["clickNav"])
const _props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {list: []}
    }
  }
})
const _store = useStore();
const _state = _store.state;
const _router = useRouter();
const _childNav_one = ref(null);
const _childNav_two = ref(null);
const _menu = ref(null);
const _data = reactive({
  // 是否隐藏菜单
  isHideMenu: true,
  // 控制导航显示隐藏的按钮竖轴位置
  hideMenu_h: 0,
  box_h: 0,
  // 子导航的位置
  child_position: {
    child_one: 0,
    child_two: 0
  },
  // 选中菜单的索引值
  selectMenuIndex: {
    main: -1,
    child_one: -1,
    child_two: -1
  },
  // 子导航数据
  child_data_list: {
    // 一级子菜单列表
    child_list_one: [],
    // 二级子菜单列表
    child_list_two: [],
  },
  // 菜单按钮使用的组件
  child_btn_tag: {
    one_btn_tag: '',
    two_btn_tag: '',
  }
});
// 当前页面跟节点元素
const menu = ref(null);
// 滚动组件
const scrollingPlugin = ref(null);
defineExpose({
  init,
  _data,
})

watch(() => _state.screenWH, () => {

  init(true);

}, {deep: true})


onMounted(() => {
  // 户型鉴赏和轮播图和按钮同步
  emitter.on("unitAppreciation", (config) => {
    // 判断是否有二级导航 轮播图同步 优先最高级
    if (_data.child_data_list.child_list_two.length) {
      _data.selectMenuIndex.child_two = _childNav_two.value._data.selectIndex = config.index;
    } else if (_data.child_data_list.child_list_one.length) {
      // 如果没有一级子导航就不执行代码
      // 和轮播图同步按钮
      _data.selectMenuIndex.child_one = _childNav_one.value._data.selectIndex = config.index;
    }
  })
  // 获取导航容器的高度
  _data.box_h = _menu.value.clientHeight;
})

watch(() => _data.child_data_list, upBtnH, {deep: true})

/**
 * @description: 更新展开收起按钮的高度
 * @author: 王琛
 * @Date: 2022-09-28 10:36:03
 * @param {*}
 * @return {*}
 */
function upBtnH() {
  setTimeout(() => {
    let H = 30;
    if (_data.child_data_list.child_list_one.length) H = H + _data.child_position.child_one;
    if (_data.child_data_list.child_list_two.length) H = H + _data.child_position.child_two;
    _data.hideMenu_h = H;
  })
}

/**
 * @description: 初始化函数
 * @author: 王琛
 * @Date: 2022-07-11 10:53:54
 * @param {*}
 * @return {*}
 */
function init(type, autoPage) {
  console.log('%c日志-134342', 'color:#fff;fontSize:15px;background:#993366;padding:5px 8px;border-radius:12px', autoPage);
  // 默认点击第一个导航
  if (!type) {
    // 获取要跳转的路由
    let jumpPage: any = {item: _props.config.list[0], index: 0};
    // 判断是否有自动跳转的路由
    if (autoPage) {
      // 分割路由路径
      const page_paths: string = autoPage.split("_");
      // 根据分割的的长度判断需要调用那个函数
      const fn_all: any = {
        0: menuClicked,
        1: childClickOne,
        2: childClicktwo,
      };
      // 获取当前的配置对象
      for (let index = 0, len = page_paths.length; index < len; index++) {
        const fn = fn_all[index];
        // 获取当前项
        const page_paths_item = page_paths[index];
        if (index) {
          jumpPage = jumpPage["children"][page_paths_item]
        } else {
          jumpPage = _props.config.list[page_paths_item];
        }
        fn({item: jumpPage, index})
      }
    } else {
      menuClicked({item: _props.config.list[0], index: 0});
    }
  }
}


/**
 * @description: 点击了主菜单
 * @author: 王琛
 * @Date: 2022-07-08 13:43:47
 * @param {*}
 * @return {*}
 */
function menuClicked({item, index, $event}) {
  // 判断如果点击的是当前菜单则不执行操作
  if (_data.selectMenuIndex.main == index) return;
  // 打开菜单按钮
  _data.isHideMenu = true;
  // 记录当前打开的菜单
  _state.currentSelectMenu.main = item;
  // 更新当前选择的菜单
  _data.selectMenuIndex.main = index;
  // 清空子菜单的选择标识
  _data.selectMenuIndex.child_one = _data.selectMenuIndex.child_two = -1;
  // 清空子菜单数据
  _data.child_data_list.child_list_one = _data.child_data_list.child_list_two = [];
  // 设置子菜单的按钮类型
  _data.child_btn_tag.one_btn_tag = item?.children_btn_tag || "textNav";
  // 如果有子菜单则打开子菜单
  _data.child_data_list.child_list_one = item?.children || [];
  // 点击导航操作的事件
  clickNav({mark: "father", item, $event})
  // 判断是否有子导航如果有子导航则默认打开第一个
  if (item?.children && item.children.length) childClickOne({item: item.children[0], index: 0})
}

/**
 * @description: 点击了一级子导航
 * @author: 王琛
 * @Date: 2022-07-22 09:29:14
 * @param {*}
 * @return {*}
 */
function childClickOne({item, index}) {
  // 判断如果点击的是当前菜单则不执行操作
  if (_data.selectMenuIndex.child_one == index) return;
  // 记录当前打开的菜单
  _state.currentSelectMenu.one = {...item, index};
  // 更新当前选择的菜单
  _data.selectMenuIndex.child_one = index;
  // 清空子菜单的选择标识
  _data.selectMenuIndex.child_two = -1;
  // 设置子菜单的按钮类型
  _data.child_btn_tag.two_btn_tag = item?.children_btn_tag || "textNav";
  // 如果有子菜单则打开子菜单
  _data.child_data_list.child_list_two = item?.children || [];
  clickNav({mark: "child_data_one", item});
  // 判断是否有子导航如果有子导航则默认打开第一个
  if (item?.children && item.children.length) childClicktwo({item: item.children[0], index: 0})

}

/**
 * @description: 点击了二级子导航
 * @author: 王琛
 * @Date: 2022-07-22 09:37:14
 * @param {*}
 * @return {*}
 */
function childClicktwo({item, index}) {

  // 判断如果点击的是当前菜单则不执行操作
  if (_data.selectMenuIndex.child_two == index) return;
  // 记录当前打开的菜单
  _state.currentSelectMenu.two = {...item, index};
  // 更新当前选择的菜单
  _data.selectMenuIndex.child_two = index;
  // 点击导航的最终事件
  clickNav({mark: "child_data_two", item})
}

/**
 * @description: 点击导航事件主导航和子导航都包括
 * @author: 王琛
 * @Date: 2022-07-08 17:57:52
 * @param {*}
 * @return {*}
 */
function clickNav({mark, item, $event}) {
  // 计算导航位置
  if ($event) scrollingPlugin.value.subNavigationScroll({childEvent: $event});
  // 调用父级组件函数
  _emit("clickNav", {mark, item});
  // 获取路由信息
  const navRouterInfo = item?.router || {};
  // 判断是否有路由信息,如果没有则不继续执行代码
  if (!(navRouterInfo.name || navRouterInfo.path)) return;
  // 整合路由并跳转
  _router.push(navRouterInfo);
}


/**
 * @description: 点击了操作菜单
 * @author: 王琛
 * @Date: 2022-09-28 10:12:09
 * @param {*}
 * @return {*}
 */
function actionHideMenu() {
  _data.isHideMenu = !_data.isHideMenu;
  !_data.isHideMenu ? _data.hideMenu_h = 30 : upBtnH();
}

</script>

